<template>
  <view v-if="shenheStatus == 0">
    <view class="tabbar">
      <view
        v-for="(item, index) in tabbar"
        @click="changeTab(item.value)"
        :class="item.value == type ? 'action' : ''"
        :key="index"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="list">
      <view>
        <view class="order" v-for="item in orderList" :key="item.id">
          <!-- 商家信息 -->
          <view class="top">
            <view class="left">
              <u-icon
                :name="item.store.logo"
                :size="30"
                color="rgb(94,94,94)"
              ></u-icon>
              <view class="store">{{ item.store.name }}</view>
            </view>
            <view class="store_admin"> </view>
          </view>

          <!-- 订单商品只有一个 -->
          <view>
            <view>
              <view class="left order_goods">
                <image :src="item.store.logo" mode="aspectFill"></image>
                <view class="right flex1">
                  <view class="order_no">
                    {{ $t('home.orderNo') }}：{{ item.order.order_no }}
                  </view>
                  <view class="title text-more-2"> </view>
                  <view class="price text-more">
                    <view
                      >{{ $t('user.allMoney') }}： ￥
                      <text class="large">{{ item.order.total_price }}</text>
                    </view>
                  </view>
                  <view class="price">
                    <view
                      >{{ $t('share.commission') }}： ￥
                      <text class="large">{{ item.money }}</text>
                    </view>
                    <view class="created_at">
                      {{ item.created_at }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      orderList: [],
      page: 1,
      type: 0,
      tabbar: [
        {
          name: this.$t('agency.cash'),
          value: 0,
        },
        {
          name: this.$t('agency.cash1'),
          value: 1,
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  onReachBottom() {
    this.page++;
    this.getData();
  },
  methods: {
    getData() {
      this.$allrequest.agency
        .commission({ page: this.page, type: this.type })
        .then(res => {
          if (res.code == 0) {
            this.orderList = res.data;
          }
        });
    },
    changeTab(value) {
      this.type = value;
      this.getData();
    },
  },
};
</script>

<style>
.tabbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  padding-bottom: 20rpx;
}
.tabbar view {
  text-align: center;
  padding: 20rpx 0;
}
.action {
  position: relative;
}
.action::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: calc(50% - 20rpx);
  width: 40rpx;
  height: 4rpx;
  border-radius: 4rpx;
  background: #007aff;
}
page,
html {
  background: #f2f2f2;
}
.list {
  margin: 30rpx;
}
.left {
  display: flex;
}
.order {
  background: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order .top .left .store {
  margin: 0 5px;
  font-size: 16px;
  font-weight: bold;
}
.order_goods {
  margin-top: 20rpx;
  display: grid;
  grid-template-columns: 1fr 2.7fr;
}
.order_goods image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
}
.order_no {
  font-size: 13px;
  font-weight: bold;
}
.title {
  color: #4c4c4c;
  font-size: 13px;
  height: 52rpx;
}
.number {
  font-size: 12px;
  color: #a0a0a0;
}
.price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.created_at {
  font-size: 12px;
  font-weight: 600;
}
</style>
